<template>
  <a-modal
    width="500px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <div class="titleBox" style="display: flex; align-items: center; position: relative; justify-content: space-between; min-height: 40px">
        <div class="closeBox" @click="close">
          <div class="closeIcon"></div>
        </div>
        <div class="title">现场处置人员</div>
        <!-- <div class="rightBox">
          <div class="btn" @click="xfrw('1')">下发任务</div>
          <div class="btn"  @click="xfrw('2')">无人机任务</div>
        </div> -->
      </div>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <a-row :gutter="0">
        <a-col :span="24">
          <div class="content" style="height: 100%" v-if="info">
            <div style="font-size: 10px; padding: 0 0 10px 0">企业安全负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
              <div class="item" v-for="(item, i) in info.qyaqfzr" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (item.avatar ? item.avatar : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height: 30px; background-size: 30px 30px; border-radius: 50%"
                ></div>
                <div style="flex: 1">
                  <div style="margin-left: 5px; font-size: 10px; display: flex; align-items: center">{{ item.name }}</div>
                  <div style="margin-left: 5px; font-size: 10px">{{ item.phone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px; padding: 0 0 10px 0">社区负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
              <div class="item" v-for="(item, i) in info.sqfzr" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (item.avatar ? item.avatar : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height: 30px; background-size: 30px 30px; border-radius: 50%"
                ></div>
                <div style="flex: 1">
                  <div style="margin-left: 5px; font-size: 10px">{{ item.name }}</div>
                  <div style="margin-left: 5px; font-size: 10px">{{ item.telphone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px; padding: 0 0 10px 0">街道负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
              <div class="item" v-for="(item, i) in info.jdfzr" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (item.avatar ? item.avatar : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height: 30px; background-size: 30px 30px; border-radius: 50%"
                ></div>
                <div style="flex: 1">
                  <div style="margin-left: 5px; font-size: 10px">{{ item.name }}</div>
                  <div style="margin-left: 5px; font-size: 10px">{{ item.telphone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px; padding: 0 0 10px 0">网格划片人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
              <div class="item" v-for="(item, i) in info.wghpy" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (item.avatar ? item.avatar : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height: 30px; background-size: 30px 30px; border-radius: 50%"
                ></div>
                <div style="flex: 1">
                  <div style="margin-left: 5px; font-size: 10px">{{ item.name }}</div>
                  <div style="margin-left: 5px; font-size: 10px">{{ item.telphone }}</div>
                </div>
              </div>
            </div>
            <div style="font-size: 10px; padding: 0 0 10px 0">报告负责人</div>
            <div style="flex: 1; display: flex; align-items: center; flex-wrap: wrap">
              <div class="item" v-for="(item, i) in info.bgfzr" :key="i">
                <!-- <a-avatar size="small" src="/img/myimg/avatar.png">
                      </a-avatar> -->
                <div
                  :style="{ backgroundImage: 'url(' + (item.avatar ? item.avatar : '/img/myimg/avatar.png') + ')' }"
                  style="width: 30px; height: 30px; background-size: 30px 30px; border-radius: 50%"
                ></div>
                <div style="flex: 1">
                  <div style="margin-left: 5px; font-size: 10px">{{ item.name }}</div>
                  <div style="margin-left: 5px; font-size: 10px">{{ item.telphone }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="bottom" style="display: flex; align-items: center; justify-content: center; margin-top: 10px">
        <div class="btn" @click="sub">通知现场处置人员</div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"
import { message } from "ant-design-vue"
const modalShow = ref(false)
const emit = defineEmits(["xfrw", "close"])
const xfrw = (e) => {
  emit("xfrw", e)
}
const close = () => {
  modalShow.value = false
  emit("close")
}
const sub = async () => {
  const res = await $api.post("api/V1/pushMessage", {
    id: data.value.id
  })
  // if (res.code === 1) {
  message.success("通知成功")
  modalShow.value = false
  emit("close")
  // } else {
  // message.error(res.msg)
  // }
}
const data = ref(null)
const info = ref(null)
const getInfo = async () => {
  const res = await $api.get("api/V1/getAqyj_detail", {
    id: data.value.id
  })
  if (res.code === 1) {
    info.value = res.data
  }
}
const show = (e) => {
  console.log(e)
  data.value = e
  getInfo()
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style scoped lang="less">
.content {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;
  width: 100%;
  .title {
    color: #d5f2ff;
    font-size: 14px;
    padding: 10px 0;
  }
  .item {
    display: flex;
    align-items: center;
    width: 120px;
    margin-right: 20px;
    margin-bottom: 10px;
    background-color: #00000066;
    padding: 5px 10px 5px 5px;
    border-radius: 99px;
  }
}

.titleBox {
  .title {
    color: #d5f2ff;
    padding: 10px;
    font-weight: 500;
    flex: 1;
  }
  .rightBox {
    padding-right: 50px;
    display: flex;
    align-items: center;
    .btn {
      background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
      border: 1px solid #57ffff;
      color: #ffffff;
      font-size: 10px;
      padding: 2px 20px;
      border-radius: 99px;
      cursor: pointer;
      margin-left: 10px;
    }
  }
  .closeBox {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #a32438;
    padding: 2px 10px 2px 15px;
    font-size: 24px;
    border-radius: 0 8px 0 20px;
    cursor: pointer;
    .closeIcon {
      background-image: url("/img/myimg/close.png");
      background-size: 15px 15px;
      width: 15px;
      height: 15px;
    }
  }
}
.bottom {
  .btn {
    background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
    border: 1px solid #57ffff;
    color: #ffffff;
    font-size: 10px;
    padding: 5px 20px;
    border-radius: 99px;
    cursor: pointer;
    margin-bottom: 10px;
  }
}
.top {
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  .top_item {
    flex: 1;
    padding: 3px 10px 3px 3px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1e6579 100%);
    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
      flex: 1;
    }
    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }
    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}
</style>
